// src/pages/task/result/components/ResultModal.tsx - 结果详情模态框组件
import React from 'react';
import { Modal, Descriptions, Tag } from 'antd';
import { ResultItem } from '../types';

// 根据任务状态获取标签颜色
const getStatusColor = (status: string) => {
  switch (status) {
    case 'SUCCESS':
      return 'green';
    case 'FAILURE':
      return 'red';
    case 'PENDING':
      return 'orange';
    case 'STARTED':
      return 'blue';
    default:
      return 'default';
  }
};

interface ResultModalProps {
  visible: boolean;
  onCancel: () => void;
  result: ResultItem | null;
}

const ResultModal: React.FC<ResultModalProps> = ({ visible, onCancel, result }) => {
  if (!result) return null;

  return (
    <Modal
      title="任务执行详情"
      open={visible}
      onCancel={onCancel}
      onOk={onCancel}
      width={800}
    >
      <Descriptions bordered column={1}>
        <Descriptions.Item label="任务ID">{result.task_id}</Descriptions.Item>
        <Descriptions.Item label="调度ID">{result.schedule_id || '-'}</Descriptions.Item>
        <Descriptions.Item label="状态">
          <Tag color={getStatusColor(result.status)}>{result.status}</Tag>
        </Descriptions.Item>
        <Descriptions.Item label="开始时间">{result.start_at || '-'}</Descriptions.Item>
        <Descriptions.Item label="完成时间">{result.finish_at || '-'}</Descriptions.Item>
        <Descriptions.Item label="执行结果">
          <pre style={{ margin: 0, whiteSpace: 'pre-wrap', wordBreak: 'break-all' }}>
            {result.result || '-'}
          </pre>
        </Descriptions.Item>
      </Descriptions>
    </Modal>
  );
};

export default ResultModal;